/*
 * FileName: 预览页面
 * Created Date: 2022-10-25 11:28:44
 * Author: 文初阳
 * -----
 * Last Modified: 2022-10-25 11:28:44
 * Modified By: 文初阳
 */
import React from 'react';
import styles from './Preview.module.scss';

const { name: resumeName, content } = {
    name: 'string',
    content: [
        {
            baseInfo: [
                {
                    name: 'string',
                    summary: 'string',
                    job: 'string',
                    aboutMe: [
                        {
                            value: 'string',
                        },
                    ],
                    knowMe: [
                        {
                            label: 'string',
                            value: 'string',
                        },
                    ],
                    contactMe: [
                        {
                            label: 'string',
                            value: 'string',
                        },
                    ],
                },
            ],
            personalSkills: [
                {
                    title: 'string',
                    content: 'string',
                },
            ],
            workExperiences: [
                {
                    startTime: '20220706',
                    endTime: '20221018',
                    company: 'string',
                    position: 'string',
                    duty: [
                        {
                            title: 'string',
                            subTitle: 'string',
                            detail: [
                                {
                                    label: 'string',
                                    value: 'string',
                                },
                            ],
                        },
                    ],
                },
            ],
            projectExperiences: [
                {
                    title: 'string',
                    summary: 'string',
                    detail: [
                        {
                            label: 'string',
                            value: 'string',
                        },
                    ],
                    image: 'string',
                },
            ],
            educationExperiences: [
                {
                    startTime: '202207',
                    endTime: '202210',
                    major: 'string',
                    content: ['aaa', 'bbb'],
                    school: 'string',
                },
            ],
        },
    ],
};
const { baseInfo, personalSkills, workExperiences, educationExperiences, projectExperiences } = content[0];
const { name, summary, job, aboutMe, contactMe, knowMe } = baseInfo[0];

const Preview: React.FC = () => {
    return (
        <div className={`${styles.wrapper} ${styles.clearfix}`}>
            <aside className={styles.user}>
                <div className={styles.photo}> </div>
                {aboutMe.length > 0 && (
                    <div className={styles.item}>
                        <div className={styles.title}>about me</div>
                        <div className={styles.content}>
                            {aboutMe.map((item) => (
                                <div>{item.value}</div>
                            ))}
                        </div>
                    </div>
                )}
                {knowMe.length > 0 && (
                    <div className={styles.item}>
                        <div className={styles.title}>know me</div>
                        <div className={styles.content}>
                            {knowMe.map((item) => (
                                <p className={styles['nextIndent']}>
                                    {item.label}
                                    <br />
                                    <a target="_blank" href={item.value}>
                                        {item.value}
                                    </a>
                                </p>
                            ))}
                        </div>
                    </div>
                )}
                {contactMe.length > 0 && (
                    <div className={styles.item}>
                        <div className={styles.title}>contact me</div>
                        <div className={styles.content}>
                            {contactMe.map((item) => (
                                <p className={styles.nextIndent}>
                                    {item.label}: {item.value}
                                </p>
                            ))}
                        </div>
                    </div>
                )}
            </aside>
            <main className={styles.main}>
                <div className={styles.header}>
                    <h1 className={styles.left}>{name}</h1>
                    <div className={styles.right}>{summary}</div>
                </div>
                <h2 className={styles.header2}>求职岗位：{job}</h2>
                {personalSkills.length > 0 && (
                    <div className={styles.mainItem}>
                        <div className={styles.title}>personal skills</div>
                        <div className={styles.content}>
                            <ol>
                                {personalSkills.map((item) => (
                                    <li className={styles.nextIndent}>
                                        <strong>{item.title}</strong>&emsp;{item.content}
                                    </li>
                                ))}
                            </ol>
                        </div>
                    </div>
                )}
                {workExperiences.length && (
                    <div className={styles.mainItem}>
                        <div className={styles.title}>WORK EXPERIENCE</div>
                        <div className={styles.content}>
                            {workExperiences.map((work) => (
                                <div>
                                    <div className={styles.line}>
                                        <span>
                                            {work.startTime} - {work.endTime}
                                        </span>
                                        <span>{work.company}</span>
                                        <span>{work.position}</span>
                                    </div>
                                    {work.duty.length > 0 && (
                                        <ol>
                                            {work.duty.map((duty) => (
                                                <li className={styles.listItem}>
                                                    <header className={styles.title}>
                                                        <b>{duty.title}</b>
                                                        <span>{duty.subTitle}</span>
                                                    </header>
                                                    {duty.detail.length > 0 && (
                                                        <main className={styles.content}>
                                                            {duty.detail.map((item) => (
                                                                <p className={styles.nextIndent}>
                                                                    <b>{item.label}</b>：{item.value}
                                                                </p>
                                                            ))}
                                                        </main>
                                                    )}
                                                </li>
                                            ))}
                                        </ol>
                                    )}
                                </div>
                            ))}
                        </div>
                    </div>
                )}
            </main>
            <div className={styles.main2}>
                {projectExperiences.length > 0 && (
                    <div className={styles.mainItem}>
                        <div className={styles.title}>project experience</div>
                        <ol>
                            {projectExperiences.map((proj) => (
                                <li className={styles.portfolio}>
                                    <div className={styles.imgWrapper}>
                                        <img src={proj.image} alt={proj.image} srcSet="" />
                                    </div>
                                    <div className={styles.linkWrapper}>
                                        <p className={styles.title}>
                                            <b>{proj.title}</b>
                                            <span>{proj.summary}</span>
                                        </p>
                                        {proj.detail.length > 0 &&
                                            proj.detail.map((item, index) => {
                                                if (index >= 3) return null;
                                                return (
                                                    <p className={styles.nextIndent}>
                                                        <b>{item.label}: </b>
                                                        {item.value}
                                                    </p>
                                                );
                                            })}
                                    </div>
                                    {proj.detail.length >= 3 && (
                                        <div className={styles.desc}>
                                            {proj.detail.map((item, index) =>
                                                index < 3 ? null : (
                                                    <p className={styles.nextIndent}>
                                                        <b>{item.label}：</b>
                                                        {item.value}
                                                    </p>
                                                )
                                            )}
                                        </div>
                                    )}
                                </li>
                            ))}
                        </ol>
                    </div>
                )}
                {educationExperiences.length > 0 && (
                    <div className={styles.mainItem}>
                        <div className={styles.title}>education experience</div>
                        {educationExperiences.map((edu) => (
                            <div className={styles.content}>
                                <div className={styles.line}>
                                    <span>
                                        {edu.startTime} - {edu.endTime}
                                    </span>
                                    <span>{edu.school}</span>
                                    <span>{edu.major}</span>
                                </div>
                                {edu.content.length > 0 &&
                                    edu.content.map((item) => <p className={styles.indent}>{item}</p>)}
                            </div>
                        ))}
                    </div>
                )}
            </div>
        </div>
    );
};

export default Preview;
